<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城首页</title>
    <style type="text/css">
        /* 页面全局样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        /* 顶部导航栏样式 */
        table.auto-style1 {
            width: 100%;
            background-color: #f8afaf;
            color: #464646;
            text-align: center;
            padding: 10px 0;
        }

        table.auto-style1 td {
            padding: 10px;
            font-size: 16px;
        }
        table.auto-style1 td a {
            text-decoration: none;
            color: #000000; /* 设置字体颜色为黑色 */
        }
        table.auto-style1 td:hover {
            background-color: #ffe6e6;
            cursor: pointer;
        }

        /* 主体内容样式 */
        form#form1 {
            margin: 20px;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        form#form1 h2 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #171717;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #2a2a2a;
            margin-bottom: 10px;
        }

        .product-list {
            margin: 10px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .product-item {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 8px;
            width: 30%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .product-item h3 {
            color: #383838;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .product-item p {
            color: #888;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .product-item button {
            background-color: #ff8e8e;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }

        .product-item button:hover {
            background-color: #cc5200;
        }

        .add-to-cart-btn {
            background-color: #4CAF50; /* 绿色背景 */
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .add-to-cart-btn:hover {
            background-color: #45a049; /* 更深的绿色 */
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<table class="auto-style1">
    <tr>
        <td><a href="index.html" id="homeLink">首页</a></td>
        <td><a href="category.html" id="categoryLink">分类</a></td>
        <td><a href="cart.html" id="cartLink">购物车</a></td>
        <td><a href="orders.html" id="ordersLink">我的订单</a></td>
        <td><a href="user_center.html" id="userLink">用户中心</a></td>
    </tr>
</table>

<!-- 热卖商品展示 -->
<form id="form1">
    <h2>热卖商品</h2>
    <div class="product-list" id="productList">
        <!-- 商品项会通过 JavaScript 动态加载 -->
    </div>
</form>

<script>
    // 在页面加载时从 localStorage 中读取 Token
    const token = localStorage.getItem("jwt_token");
    console.log("Token: ", token);

    // 检查是否有有效的 Token
    if (token) {
        // 如果有 Token，添加到请求头中
        fetchProducts(token);
    } else {
        alert("没有有效的 Token，请先登录！");
        window.location.href = "login.html";  // 如果没有 Token，跳转到登录页面
    }

    // 使用 Token 来获取商品数据
    async function fetchProducts(token) {
        try {
            const response = await fetch("http://localhost:8080/api/products", {
                method: "GET",
                headers: {
                    "Authorization": `Bearer ${token}`  // 使用 Token 来验证用户
                }
            });

            // 检查响应是否成功 (状态码 2xx)
            if (response.ok) {
                const data = await response.json();
                const productsList = document.getElementById("productList");

                if (data && data.length > 0) {
                    // 使用第一个界面的商品展示样式
                    data.forEach(product => {
                        const productItem = document.createElement("div");
                        productItem.className = "product-item";
                        productItem.innerHTML = `
                             <img src="${product.imageUrl}" alt="${product.name}" style="width: 100%; height: auto;">
                            <h3>${product.name}</h3>
                            <p>${product.description || '暂无描述'}</p>
                            <p>价格: ${product.price || '未知'}元</p>
                            <button onclick="handleBuy(${product.id})">立即购买</button>
                            <button class="add-to-cart-btn" onclick="addToCart(${product.id})">加入购物车</button>
                        `;
                        productsList.appendChild(productItem);
                    });
                } else {
                    productsList.innerHTML = "<p>没有商品信息。</p>";
                }
            } else {
                console.log("请求失败，状态码:", response.status);

                // 处理非 2xx 状态码的响应内容
                const errorText = await response.text();  // 尝试读取文本内容
                console.log("错误信息:", errorText);
                alert("获取商品数据失败: " + errorText);  // 显示错误信息给用户
            }

        } catch (error) {
            console.error("获取商品数据失败:", error);
            alert("获取商品数据失败: " + error.message);
        }
    }

    // 处理点击"立即购买"按钮的逻辑
    function handleBuy(productId) {
        alert(`你选择了购买商品 ID: ${productId}`);
        // 在这里你可以添加购买逻辑，例如跳转到购买页面
    }

    // 处理点击"加入购物车"按钮的逻辑
    function addToCart(productId) {
        alert(`商品 ID: ${productId} 已加入购物车！`);
        // 你可以在这里将商品添加到购物车，可能通过 localStorage 或后端 API 来实现
    }
</script>
</body>
</html>
